<template>
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span>返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3>添加/编辑地址</h3>
	</div>
	<el-form
	    style="width: 100%;"
	    label-width="auto"
	  >
			<el-form-item label="地址类型" label-width="100">
				<el-radio-group v-model="addressType">
				   <el-radio :value="1">发货地址</el-radio>
				   <el-radio :value="0">收货地址</el-radio>
				 </el-radio-group>
			</el-form-item>
	

			<el-form-item label="联系人" label-width="100">
				<el-input style="width: 220px;" v-model="person" placeholder="请输入联系人"></el-input>
			</el-form-item>
	

			<el-form-item label="联系方式" label-width="100">
				<el-input style="width: 220px;" v-model="phonenumber" placeholder="请输入联系方式"></el-input>
			</el-form-item>
	
	
			<el-form-item label="地址" label-width="100">
				<el-cascader v-model="word" :options="regionData"  @change="handleChange" placeholder="请选择地址"/>
			</el-form-item>
			<el-form-item label-width="100">
				<el-input placeholder="请输入详细地址" style="width: 220px;" v-model="detailaddress"></el-input>  
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save" style="margin-left: 10%;margin-top: 20px;">保存</el-button>
				<el-button style="margin-top: 20px;">取消</el-button>
			</el-form-item>
			<!-- <h1 style="text-align: center;">地图</h1> -->
	</el-form>

	
</template>

<script setup>
import { onMounted,ref,reactive,defineEmits } from 'vue';
import { useRoute,useRouter } from "vue-router";
import {
      provinceAndCityData,
      pcTextArr,
      regionData,
      pcaTextArr,
      codeToText,
    } from "element-china-area-data";
import { addstoreaddress,updatastoreaddress } from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus'
	import {ArrowLeft} from '@element-plus/icons-vue'
let route=useRoute();
let router=useRouter()
const emit= defineEmits(['retronParent'])
const addressType=ref();
const person=ref();
const phonenumber=ref()
const detailaddress=ref('')

const address=ref('')//地址全称
let word=ref([])
const handleChange=(val)=>{
	var valArr=Array.from(val)
	var lastArr=[]
	valArr.forEach(item=>{
		lastArr.push(codeToText[item])
	})
	address.value=lastArr.join(" ")
	// console.log(address.value);

}

//回显
// const showAddress=()=>{
// 	var addressStr="辽宁省 大连市 甘井子区"
// 	var addressArr=addressStr.split(" ")
// 	var provinceStr=addressArr[0];
// 	var cityStr=addressArr[1];
// 	var areaStr=addressArr[2];
// 	let p=regionData.find(v=>v.label==provinceStr)
// 	let c=p.children.find(v=>v.label==cityStr)
// 	let a=c.children.find(v=>v.label==areaStr)
// 	word.value=[p.value,c.value,a.value]
// }


const save= async ()=>{
	let addressData= reactive({
			addressTel:Number(phonenumber.value),
			addressDetails: detailaddress.value,
			addressProvince: address.value.split(" ")[0],
			addressCity: address.value.split(" ")[1],
			addressArea: address.value.split(" ")[2],
			addressType:Number(addressType.value),
			userName:person.value,
			siteId:Number(sessionStorage.getItem("siteId"))
		}) 
	if(sessionStorage.getItem("addressId")){
		//修改
		addressData.addressId=Number(sessionStorage.getItem("addressId"))
		// console.log(addressData);
		let res = await updatastoreaddress({
			addressId:Number(sessionStorage.getItem("addressId")),
			addressTel:Number(phonenumber.value),
			addressDetails: detailaddress.value,
			addressProvince: address.value.split(" ")[0],
			addressCity: address.value.split(" ")[1],
			addressArea: address.value.split(" ")[2],
			// addressType:Number(addressType.value),
			// "userName":person.value,
			// siteId:Number(sessionStorage.getItem("siteId"))
		});
		// console.log("修改",res);
		emit('retronParent')
		if(res == "1"){
			ElMessage.success({
				message:"修改成功"
			})
		}else{
			ElMessage.error({
				message:"修改失败"
			})
		}
		// window.location.reload()
	}else{
		//添加
		let res = await addstoreaddress(addressData)
		//console.log(res);
		// window.location.reload()
		emit('retronParent')
		if(res == "1"){
			ElMessage.success({
				message:"添加成功"
			})
		}else{
			ElMessage.error({
				message:"添加失败"
			})
		}
		
	}
}
const addlist=reactive({})
onMounted(async ()=>{
		//获取所有菜单，展示在下拉菜单中
		if(sessionStorage.getItem("addressId")){
			//如果是修改功能，回显
			addlist.value=JSON.parse(sessionStorage.getItem("row"));
			person.value =addlist.value.userName
			phonenumber.value=addlist.value.addressTel
			detailaddress.value=addlist.value.addressDetails
			
			// var addressStr="辽宁省 大连市 甘井子区"
			var addressStr=`${addlist.value.addressProvince} ${addlist.value.addressCity} ${addlist.value.addressArea}`
			var addressArr=addressStr.split(" ")
			var provinceStr=addressArr[0];
			var cityStr=addressArr[1];
			var areaStr=addressArr[2];
			let p=regionData.find(v=>v.label==provinceStr)
			let c=p.children.find(v=>v.label==cityStr)
			let a=c.children.find(v=>v.label==areaStr)
			word.value=[p.value,c.value,a.value]
			// if(addlist.value.addressType=="收货地址"){
			// 	addlist.value.addressType.value=true
			// }else{
			// 	addlist.value.addressType=true
			// }
		}else{
			
		}
	})


const back=()=>{
	emit('retronParent')
}
</script>

<style scoped lang="less">

	.footer{
		margin-left: 100px;
	}
</style>